<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Conic gradients</title>
</head>

<body>
  <style>
    /* 1. 全局样式设置 */
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  </style>
  <style>
    /* 2. 左边按钮样式设置 */
    @property --roate {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    button {
      --bule: #0173ff;
      --radius: 50px;
      --roate: 0deg;
      padding: 20px 30px;
      border-radius: var(--radius);
      background: var(--bule);
      color: #fff;
      font-weight: 500;
      font-size: 30px;
      border: 0;
      position: relative;
      /* 2.1 超出部分隐藏(以免一些内容溢出、效果露馅 等情况) */
      overflow: hidden;
    }

    button::before {
      content: "";
      /* background: conic-gradient(from var(--roate),
        transparent 0%, white 5%, transparent 10%); */

      /* BOSS直聘简历上方【开通会员】对应的 conic函数 代码: */
      background: conic-gradient(from var(--roate),
        transparent 10%, transparent, #f4f4f4);
      position: absolute;
      inset: 0;
      /* 2.2 动画效果: 逆时针往复旋转360° */
      animation: rotate 2s linear infinite;
    }
  
    /* 2.3 再加上一层“遮罩层”, 将效果(conic-gradient)盖住, 以免展现出当前渲染函数的图案... */
    button::after {
      content: "";
      background: var(--bule);
      position: absolute;
      inset: 3px;
      border-radius: calc(var(--radius) - 3px);
    }

    .fancy {
      position: absolute;
      inset: 0;
      /* background: red; */
    }

    .text {
      position: relative;
      z-index: 1;
    }

    @keyframes rotate {
      to {
        --roate: 360deg
      }  
    }
  </style>
  <button>
    <div class="fancy"></div>
    <span class="text">Download For Free</span>
  </button>

  <style>
    .rainbow::before {
        background: conic-gradient(from var(--roate),
         #fd004c,
         #fe9000,
         #fff020,
         #3edf4b,
         #3363ff,
         #b102b7,
         #fd004c);
        animation: rotate 0.8s linear infinite;
        transition: opacity 0.5s linear;
        opacity: 1;
    }

    .step::before {
      opacity: 0;
    }

    .rainbow {
      background: #1c1b29;
    }

    .rainbow::after {
      background: #1c1b29;
    }
  </style>
  <button class="rainbow" style="margin-left: 20px;">
    <div class="fancy"></div>
    <span class="text">Download For Free</span>
  </button>

  <script>
    var btn = document.querySelector('.rainbow')
  
    setInterval(() => {
      if (btn.classList.contains('step')) {
        btn.classList.remove('step')
      } else {
        btn.classList.add('step')
      }
    }, 3000)
    console.log(btn)
  </script>
</body>

</html>